<template>
  <div class="flow-history-div">
    <Row type="flex" class="row-history" justify="space-around">
      <Col :span="5" class="row-col-history">任务名称 :</Col>
      <Col :span="7">
        {{ userTask.taskName }}
        <span v-if="userTask.countFromUsername" style="font-weight: bold">(来自: {{ userTask.countFromUsername }} 的加签)</span>
      </Col>
      <Col :span="5" class="row-col-history">是否知会 :</Col>
      <Col :span="7">{{ userTask.notify + '' === '0' ? '否' : '是' }}</Col>
    </Row>
    <Row type="flex" class="row-history" justify="space-around">
      <Col :span="5" class="row-col-history">执行方式 :</Col>
      <Col :span="7">{{ executeWayType(userTask.executeWay) }}</Col>
      <Col :span="5" class="row-col-history">审批按钮权限 :</Col>
      <Col :span="7">{{ userTask.actionAuth }}</Col>
    </Row>
    <Row type="flex" class="row-history" justify="space-around">
      <Col :span="5" class="row-col-history">是否支持手动设置审批人 :</Col>
      <Col :span="7">{{ userTask.manualSelectUser + '' === '0' ? '否' : '是' }}</Col>
      <Col :span="5" class="row-col-history">是否自动通过 :</Col>
      <Col :span="7">{{ userTask.autoComplete + '' === '0' ? '否' : '是' }}</Col>
    </Row>
    <Row type="flex" class="row-history" justify="space-around">
      <Col :span="5" class="row-col-history">
        <span>经过此节点不允许撤回: </span>
      </Col>
      <Col :span="7">
        <span>{{ userTask.passNodeCannotWithdraw ? '是' : '否' }}</span>
      </Col>

      <Col :span="5" class="row-col-history">
        <span>不允许撤回原因: </span>
      </Col>
      <Col :span="7">
        <span>{{ userTask.passNodeCannotWithdrawMessage }}</span>
      </Col>
    </Row>
    <Row type="flex" class="row-history" justify="space-around">
      <Col :span="5" class="row-col-history">强制手签 :</Col>
      <Col :span="7">{{ userTask.mustSignature + '' === '0' ? '否' : '是' }}</Col>
      <Col :span="5" class="row-col-history">
        <span v-show="userTask.countFromUsername">加签人: </span>
      </Col>
      <Col :span="7">
        <span v-show="userTask.countFromUsername">{{ userTask.countFromUsername }}</span>
      </Col>
    </Row>
    <Row type="flex" class="row-history" justify="space-around">
      <Col :span="5" class="row-col-history">备注 :</Col>
      <Col :span="19">{{ userTask.remark }}</Col>
    </Row>
  </div>
</template>

<script>
import {Avatar, Col, Row} from "ant-design-vue";

export default {
  name: "flowHistoryBasic",
  components: {
    Row,
    Col,
    Avatar
  },
  data() {
    return {};
  },
  props: {
    userTask: {
      type: Object,
      default: () => Object
    }
  },
  methods: {
    executeWayType(value) {
      if (value === 'single') {
        return '单用户';
      } else if (value === 'multiCompetition') {
        return '多人竞争';
      } else if (value === 'multiSequence') {
        return '多人依次执行';
      } else if (value === 'multi') {
        return '多人同时审批';
      }
    }
  }
};
</script>

<style scoped>
.row-history {
  margin-bottom: 10px;
}

.row-col-history {
  text-align: right;
  padding-right: 5px;
}

.flow-history-div {
  padding: 10px;
  background: #f3f5f7;
  border-radius: 8px;
}
</style>
